<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>解析打包css和less文件</title>
  <!-- 
  在 Webpack 中，解析和打包 JavaScript、图片和 Vue 文件需要使用不同的加载器和插件。以下是对这三种类型文件的处理说明总结。
  1. 解析 JavaScript 文件

  Webpack 默认支持 JavaScript 文件的解析，无需额外配置。但是，如果你使用了 ES6+ 语法或 JSX 语法，通常需要使用 Babel 来转译。

   配置示例：
  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/, // 匹配所有 .js 文件
          exclude: /node_modules/, // 排除 node_modules 文件夹
          use: {
            loader: 'babel-loader', // 使用 babel-loader 转译
            options: {
              presets: ['@babel/preset-env'], // 使用 env 预设
            },
          },
        },
      ],
    },
  };
  2. 解析图片文件

  处理图片文件（如 PNG、JPEG、GIF 等）通常需要使用  `file-loader`  或  `url-loader` ，后者可以将小于指定大小的图片转换为 Base64 字符串。

   配置示例：
  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif|svg)$/, // 匹配图片文件
          use: [
            {
              loader: 'file-loader', // 使用 file-loader
              options: {
                name: '[name].[hash:8].[ext]', // 输出文件名格式
                outputPath: 'images/', // 输出路径
              },
            },
          ],
        },
      ],
    },
  };
  3. 解析 Vue 文件

  要处理 Vue 单文件组件（ `.vue`  文件），需要使用  `vue-loader`  以及相关的插件。

   配置示例：
  const { VueLoaderPlugin } = require('vue-loader');

  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/, // 匹配 .vue 文件
          loader: 'vue-loader', // 使用 vue-loader
        },
      ],
    },
    plugins: [
      new VueLoaderPlugin(), // 必须添加 VueLoaderPlugin
    ],
  };
  4. 安装依赖

  在使用这些加载器之前，需要先安装相应的依赖。可以使用 npm 或 yarn 进行安装：
  npm install --save-dev babel-loader @babel/core @babel/preset-env file-loader url-loader vue-loader vue-template-compiler
  或者使用 yarn：
  yarn add --dev babel-loader @babel/core @babel/preset-env file-loader url-loader vue-loader vue-template-compiler
  总结

  - **JavaScript 文件处理**：使用  `babel-loader`  转译 ES6+ 语法。
  - **图片文件处理**：使用  `file-loader`  或  `url-loader`  来处理图片文件。
  - **Vue 文件处理**：使用  `vue-loader`  处理 Vue 单文件组件，并添加  `VueLoaderPlugin` 。

  通过以上配置，Webpack 可以高效地解析和打包 JavaScript、图片和 Vue 文件，帮助开发者构建现代化的前端应用。

  npm install webpack webpack-cli css-loader less less-loader style-loader postcss-loader postcss-preset-env @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoping @babel/preset-env babel-loader @babel/core --save-dev

  npm install vue
  -->
</head>
<body>

  <div id="app"></div>

  <script src="./dist/bundle.js"></script>
  
</body>
</html>